<template>
    <a-layout-sider style="width: 180px">
        <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="inline"
        >
          <a-sub-menu key="sub1">
            <template #title>
              <home-outlined />
              <span>{{ list.homepage }}</span>
            </template>
            <a-menu-item key="1">
              <home-outlined />
              <span>{{ list.statistics }}</span>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template #title>
              <shopping-outlined />
              <span>{{ list.commodity }}</span>
            </template>
            <a-menu-item key="2">
              <menu-outlined />
              <span>{{ list.productList }}</span>
            </a-menu-item>
            <a-menu-item key="3">
              <sisternode-outlined />
              <span>{{ list.addCommodity }}</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  HomeOutlined,
  ShoppingOutlined,
  MenuOutlined,
  SisternodeOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  components: {
    HomeOutlined,
    ShoppingOutlined,
    MenuOutlined,
    SisternodeOutlined,
  },
  setup() {
    const selectedKeys = ref<string[]>(['1']);
    const openKeys = ref<string[]>(['sub1']);
    const list = {
      homepage: "主页",
      statistics: "统计",
      commodity: "商品",
      productList: "商品列表",
      addCommodity: "添加商品",
    };
    return {
      list,
      selectedKeys,
      openKeys,
    };
  },
});
</script>

<style>
.content-header{
    display: flex;
    line-height: 54px;
    justify-content: space-between;
    padding-right: 20px;
}
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
</style>